<template>
  <div class="trail">
    <!-- <GoBack :title="title" /> -->
    <div class="header">
      <span class="back" @click="goBack"
        ><el-icon><ArrowLeft /></el-icon>返回</span
      >
    </div>
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="试听" name="one">
        <AllTrail v-if="activeName === 'one'" />
      </el-tab-pane>
      <!-- <el-tab-pane label="一对一试听" name="two">
        <AllTrail :selectedClue="selectedClue" v-if="activeName === 'two'" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
// import GoBack from '@/components/GoBack/index.vue'
import AllTrail from './components/allTrail.vue'
//返回按钮
const router = useRouter()
const goBack = () => {
  router.go(-1)
}
//接收学员ID
const route = useRoute()
const studentsId = route.params.studentsId
const title = route.meta.title
const selectedClue = ref(1)
const activeName = ref('one')
const handleClick = (tab) => {
  // console.log(tab)
  activeName.value = tab.props.name
}
</script>
<style lang="scss" scoped>
.trail {
  height: 100%;
  overflow: auto;
  position: relative;
  .header {
    position: absolute;
    top: 10px;
    right: 5px;
    z-index: 100;
    // display: flex;
    // align-items: center;
    // justify-content: space-between;
    // margin-top: 10px;
    // margin-bottom: 25px;
    // width: 150px;
    // background-color: red;
    color: #989898;
    .back {
      display: flex;
      align-items: center;
      cursor: pointer;
    }
  }
}
</style>
<style lang="scss" scoped>
:deep(.demo-tabs) {
  .el-tabs__content {
    /* padding: 20px; */
    overflow: visible;
  }
}

:deep(.el-tabs__nav-scroll) {
  .el-tabs__nav {
    // display: flex !important;
    // justify-content: flex-end !important;
    .el-tabs__item {
      font-size: 16px;
      color: rgba(0, 0, 0, 0.6);
      padding: 0 20px;
    }
  }
}
</style>